<template>
  <div>
    <div v-if="loadingview">
      <van-loading type="spinner" size="70px" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)"/>
    </div>
    <div class="parent_box" v-show="payview" >

      <!--    最上面的背景图-->
      <van-image width="100%"
                 height="155"
                 :src="backLogo">
      </van-image>
      <!--  白色背景边框  -->
      <!--  :style="sliderStyle"  -->
      <div  class="headMsgbox" ref="headMsg">
        <img class="headshots" :src="logo"/>
        <div class="com_locbox">
          <p class="compay_msg">{{ merName }}</p>
          <div class="localtion_msg">
            <label>{{ shopName }}（{{ cashierName }}）</label>
          </div>
        </div>

        <div class="pagediv" >
          <van-search
              v-model="value"
              shape="round"
              background="white"
              placeholder="请输入搜索关键词"
              class="search_box"
          />
          <div class="search_line"></div>

          <div class="personMsg">
            <van-form class="FeesDetails" v-for="(val,key,index) in themechannel">
              <van-field
                  v-model.trim="personMsg[index]"
                  :key="index"
                  :placeholder="key"
                  :label="key"
                  input-align="right"
                  @input="changeCharFilter(index)"
                  :required="personMust[index]"
              >
                <template #left-icon>
                  <svg t="1630656956842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9873" width="16" height="16"><path d="M804.562373 0c80.797476 0 146.283903 64.07235 146.283903 143.114419v833.135589A48.273688 48.273688 0 0 1 902.084975 1023.987322c-6.826582 0-13.555642-1.414078-19.797088-4.144711l-362.39399-157.547763a19.894611 19.894611 0 0 0-15.798661 0l-362.39399 157.547763a49.200153 49.200153 0 0 1-64.364917-24.185605A46.810849 46.810849 0 0 1 73.142857 976.201247V143.114419C73.142857 64.121111 138.629284 0 219.42676 0h585.135613z m0 95.425866H219.42676a48.273688 48.273688 0 0 0-48.761301 46.371997v761.066387l293.786839-127.754609a119.367665 119.367665 0 0 1 92.987801-0.926464l2.096736 0.877703L853.323674 902.815489V143.16318a48.224927 48.224927 0 0 0-47.395985-47.688553H804.562373z m-196.361759 386.482072a50.077856 50.077856 0 1 1 0 100.204474H318.265918a50.077856 50.077856 0 1 1 0-100.204474h289.934696z m97.522602-195.63034a50.077856 50.077856 0 1 1 0 100.204474H318.265918a50.077856 50.077856 0 0 1 0-100.204474h387.457298z" p-id="9874"></path></svg>
                </template>

              </van-field>
            </van-form>
            <div class="line"></div>
          </div>

          <van-form class="FeesDetails" v-for="(val,key,index) in paychannel">
            <van-field
                v-model.trim="payModel[index]"
                :key="index"
                placeholder="金额"
                :label="key"
                input-align="right"
                left-icon="balance-o"
                autosize
                :ref="key"
                :center=true
                type="number"
                @keydown="InoutChange"
                :rules="[{ reg: true, message: '请输入正确金额' }]"
                @input="calculatePayMoney"
                @click-right-icon="focusinput(index)"
                :id="index"
            >
              <template #extra>
                <div style="width: 8px;height: 3px">

                </div>
                <div>
                  <van-checkbox v-model="payModelCheckBox[index]" name="index" @click="calculatePayMoney"  ></van-checkbox>
                </div>
              </template>
              <template #left-icon>
                <div>
                  <svg t="1630656040257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5757" ><path d="M269.585067 68.266667h484.829866a34.133333 34.133333 0 0 1 27.716267 54.033066l-104.448 145.442134A442.811733 442.811733 0 0 0 520.260267 238.933333h-16.520534c-55.125333 0-108.270933 10.1376-157.422933 28.808534l-104.448-145.408A34.133333 34.133333 0 0 1 269.585067 68.266667zM186.402133 162.133333l97.143467 135.2704a443.460267 443.460267 0 0 0-215.552 301.4656l-20.548267 106.939734C19.114667 853.162667 132.027733 989.866667 282.077867 989.866667h459.844266c150.050133 0 262.9632-136.704 234.632534-284.0576l-20.548267-106.939734c-25.156267-130.798933-106.222933-238.933333-215.552-301.4656l97.109333-135.2704C886.237867 94.378667 837.8368 0 754.414933 0H269.585067C186.197333 0 137.762133 94.378667 186.402133 162.133333zM503.739733 307.2h16.520534a375.466667 375.466667 0 0 1 368.708266 304.571733l20.548267 106.939734c20.241067 105.233067-60.416 202.888533-167.594667 202.888533H282.077867c-107.178667 0-187.835733-97.621333-167.594667-202.888533l20.548267-106.939734A375.466667 375.466667 0 0 1 503.739733 307.2z m-104.106666 146.5344a34.133333 34.133333 0 0 0-48.298667 48.264533L429.602133 580.266667H375.466667a34.133333 34.133333 0 1 0 0 68.266666h102.4v51.2h-102.4a34.133333 34.133333 0 1 0 0 68.266667h102.4v68.266667a34.133333 34.133333 0 1 0 68.266666 0v-68.266667h102.4a34.133333 34.133333 0 1 0 0-68.266667h-102.4V648.533333h102.4a34.133333 34.133333 0 1 0 0-68.266666h-54.135466l78.267733-78.267734a34.133333 34.133333 0 0 0-48.264533-48.264533L512 566.135467l-112.401067-112.401067z" p-id="5758"></path></svg>
                </div>
              </template>
              <template #right-icon>
                <van-icon name="edit" />
              </template>

            </van-field>

          </van-form>
          <div>
            <div class="linepay"></div>

            <van-form>
              <van-field class="pay_moeny"
                         v-model="payMoney"
                         input-align="right"
                         label="总金额"
                         readonly
              />
            </van-form>
          </div>



          <div style="margin: 16px;">
            <van-button ref="sub" round block type="info" native-type="submit" @click="sub">提交</van-button>
          </div>
          <label
              style="font-size:14px;position: absolute;left: 50%; transform: translate(-50%, 0);color: rgb(101,104,109);  white-space: nowrap;
">{{ chipName }}
          </label>
        </div>

      </div>
      <div class="buttom_back_gournd_box">
      </div>
    </div>
    <div class="outside_box" v-if="fontview">

      <div class="pay_success_box">
        <van-icon class="checked_icon"  name="checked" />
        <p class="paysuccess">支付成功</p>
        <h3 class="paymoney" >￥{{ trxamt }}</h3>
      </div>
      <hr class="hr" />

      <div class="remark">
        <label v-for="(val,index) in remarkArray" style="margin-bottom: 10px">
          <label style="color: red">*</label>
          <svg t="1630656956842" class="iconmsg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9873" width="20" height="20"><path d="M804.562373 0c80.797476 0 146.283903 64.07235 146.283903 143.114419v833.135589A48.273688 48.273688 0 0 1 902.084975 1023.987322c-6.826582 0-13.555642-1.414078-19.797088-4.144711l-362.39399-157.547763a19.894611 19.894611 0 0 0-15.798661 0l-362.39399 157.547763a49.200153 49.200153 0 0 1-64.364917-24.185605A46.810849 46.810849 0 0 1 73.142857 976.201247V143.114419C73.142857 64.121111 138.629284 0 219.42676 0h585.135613z m0 95.425866H219.42676a48.273688 48.273688 0 0 0-48.761301 46.371997v761.066387l293.786839-127.754609a119.367665 119.367665 0 0 1 92.987801-0.926464l2.096736 0.877703L853.323674 902.815489V143.16318a48.224927 48.224927 0 0 0-47.395985-47.688553H804.562373z m-196.361759 386.482072a50.077856 50.077856 0 1 1 0 100.204474H318.265918a50.077856 50.077856 0 1 1 0-100.204474h289.934696z m97.522602-195.63034a50.077856 50.077856 0 1 1 0 100.204474H318.265918a50.077856 50.077856 0 0 1 0-100.204474h387.457298z" p-id="9874"></path></svg>
          {{ val }}<br>
        </label>
      </div>


    </div>

  </div>


</template>

<script>
export default {
  name: "FeesDetails",
  created() {

    this.getUrl();
    this.getFeesDetails();
    document.querySelector('body').setAttribute('style', 'background: #f7f7f7');
    if (this.isPay){
      setTimeout(() => {
        console.log(this.isPay)
        this.loadingview=false;
        this.fontview=false;
        this.payview=true;
      }, 500);

    }else {
      console.log(this.isPay)
      this.loadingview=false;
      this.fontview=true;
      this.payview=false;
    }
  },
  data() {
    return {
      paychannel: {},
      payModel: [],
      payModelCheckBox: [],
      payMoney: 0.00,
      reg: /^(([1-9]+)|([0-9]+\.[0-9]{1,2}))$/,
      sliderStyle: {
        height: ''
      },
      //码牌编号
      virtCode: '',
      //收银员名称
      cashierName: '',
      //码牌编号
      chipName: '',
      //背景图
      backLogo: '',
      //logo
      logo: '',
      // 商店名称
      shopName: '',
      merName: '',
      //姓名
      name: '',
      //手机
      phone: '',
      //备注
      remake: '',
      merchant: '',
      backphoto: '',
      //输入的信息
      themechannel:{},
      // 输入信息的内容
      personMsg:[],
    //  输入框是否必填
      personMust:[],
      //付款页面是否可见
      payview:false,
      //付款成功是否可见
      fontview:false,
      //页面加载图标
      loadingview:true,
      trxamt:'',
      remarkArray:'',
      //作为判断页面是否是付款页面的标志位
      isPay:true,
      ShopCode:'',
      //付款模式
      modelType:''

    }
  },
  methods: {
    //点击icon图标获取输入框聚焦
    focusinput(index){
      let inputelement=document.getElementById(index)
      inputelement.focus();
    },

    changeCharFilter(index){
      if (this.personMsg[index]==undefined){
      }else {
        this.personMsg[index]=this.personMsg[index].replace(/[^\a-\z\A-\Z\-\#0-9\u4E00-\u9FA5]/g,"");
      }
      return this.personMsg[index];
    },


    InoutChange(e) {
      if ('-' == e.key) {
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || ''
      }
      if ('Backspace' == e.key) {
        return;
      }
      else {
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || ''
      }
    },

    async getFeesDetails() {
      const {data: res} = await this.$http.post('https://tltopay.com/wscoupon-admin/trade/tlorgInfo/getOrgInfoByVirtcode', this.$qs.stringify({virtcode: this.virtcode}))


      this.ShopCode=res.ShopCode;
      this.shopName = res.ShopName;
      this.cashierName = res.CashierName;
      this.chipName = res.ChipName;
      this.merName = res.MerName;
      this.virtCode = res.VirtCode;
      this.backLogo = res.BackLogo;
      this.logo = res.Logo;
      this.merchant = res.Merchant;
      var str = res.Paychannel;
       this.modelType=res.Modeltype;
      console.log(this.modelType)
      //将中文引号替代为英文引号，并转为json对象
      str = str.replace(/\’|\‘/g, "'").replace(/\“|\”/g, "\"");
      var json = JSON.parse(str);
      var jsonThemechannel=res.Themechannel.replace(/\’|\‘/g, "'").replace(/\“|\”/g, "\"");
      this.themechannel=JSON.parse(jsonThemechannel);
      console.log(this.themechannel)

      let  i=0;
      for (let ever in  this.themechannel){
        console.log(ever)
        // 截取获取必填或非必填
        if ('01'==this.themechannel[ever].slice(4, 6)){
          this.personMust[i]=true;
        }else {
          this.personMust[i]=false;
        }
         i++;
      }

      var index = 0;

      for (var ever in json) {
        this.payModelCheckBox[index] = false;
        console.log(ever)
        this.payModel[index] = (json[ever] / 100).toFixed(2);
        if (this.payModel[index] == 0) {
          this.payModel[index] = '';
        }
        index++;
      }
      console.log('paymodel'+this.payModel)
      this.paychannel = json;

      this.calculatePayMoney();

    },
    //计算需要付的钱,勾选情况
    calculatePayMoney() {
      this.payMoney = 0;


      for (let i = 0; i < this.payModelCheckBox.length; i++) {
        if (this.payModelCheckBox[i] == true) {
          if (this.payModel[i] == '') {
            continue;
          }
          this.payMoney=this.accAdd(this.payMoney,this.payModel[i]);
        }
      }
      this.payMoney=this.payMoney.toFixed(2);
      //限制小数点两位
    },


    async sub() {
      if (parseFloat(this.payMoney)<=0){
        this.$notify('请输入正确金额');
        return;
      }
      //判断必填选项是否填写
      let theIndex=0;
      for (let key in this.themechannel) {
        if (this.personMust[theIndex]==true){
          console.log(this.personMust[theIndex])
          console.log(this.personMsg[theIndex]);
          if(""==this.personMsg[theIndex]||undefined==this.personMsg[theIndex]){
            this.$notify('请输入'+key);
            return;
          }
        }else{
          if (undefined==this.personMsg[theIndex]){
            this.personMsg[theIndex]=""
          }
        }
        theIndex++;
      }


      //订单金额详情
      console.log(this.payMoney);
      let i = 0;
      let json = '{';
      for (let key in this.paychannel) {
        //没勾选不穿为空 为空传‘’
        json += '"'
        json += key;
        json += '"'
        json += ':';
        if (this.payModel[i] == '') {
          json += '""'
        } else if (this.payModelCheckBox[i] == false) {
          json += '""'
        } else {
          json += '"'
          json += ((this.payModel[i] * 100).toFixed(0));
          json += '"'
        }
        json += ',';
        i++;
      }
      json = json.slice(0, json.length - 1);
      json += '}'

      //付款人详情
      let n = 0;
      let jsonmsg = '{';
      for (let key in this.themechannel) {
        //没勾选不穿为空 为空传‘’
        jsonmsg += '"'
        jsonmsg += key;
        jsonmsg += '"'
        jsonmsg += ':';
        if (this.personMsg[n] == '') {
          jsonmsg += '""'
        } else {
          jsonmsg += '"'
          jsonmsg += this.personMsg[n];
          jsonmsg += '"'
        }
        jsonmsg += ',';
        n++;
      }
      jsonmsg = jsonmsg.slice(0, jsonmsg.length - 1);
      jsonmsg += '}'

      console.log(jsonmsg)
      const {data: res} = await this.$http.post('https://tltopay.com/wscoupon-admin/trade/getOrderPay',
          this.$qs.stringify(
              {
                thememodel:jsonmsg,
                amountSum: (this.payMoney * 100).toFixed(0),
                paymodel: json,
                virtcode: this.virtCode,
                merchant: this.merchant,
                shopname: this.shopName,
                cashiername: this.cashierName,
                shopcode:this.ShopCode
              }));
      let content = res.content;
      console.log(content)
      window.location.href = content;
      console.log(json)
    },
    getUrl() {
      const paramsObj = this.$route.query;
      console.log(paramsObj);
      if (paramsObj !== null) {
        this.virtcode = paramsObj.virtcode;
      }
      if(paramsObj.trxamt!=null){
        this.trxamt=(paramsObj.trxamt/100).toFixed(2);
        var remark=paramsObj.remark;
        console.log(remark);
        this.remarkArray=remark.split("/");
        console.log(this.remarkArray)

        this.isPay=false;

      }else {

        this.isPay=true;
      }
    },
    accAdd(arg1, arg2) {
      var r1, r2, m;

      try {

        r1 = arg1.toString().split(".")[1].length;

      } catch (e) {

        r1 = 0;

      }

      try {

        r2 = arg2.toString().split(".")[1].length;

      } catch (e) {

        r2 = 0;

      }

      m = Math.pow(10, Math.max(r1, r2));

      return (arg1 * m + arg2 * m) / m;

    }


  },
  mounted() {
    this.$nextTick(() => {

    })
  }
}
</script>

<style scoped>
.personMsg {
  margin-bottom: 30px;
  margin-top: 6px;
}

.pagediv {
  width: 90%;
  position: relative;
  left: 5%;
  top: 30px;
}

.van-field {
  border-radius: 5px 5px 5px 5px;
}

.pay_moeny {
  font-size: 18px;
  margin-top: 30px;
}

/*最外层div*/
.parent_box {
  position: absolute;
  width: 100%;
  /*height: 100%;*/
  overflow:hidden;

}

/*头像样式*/
.headshots {
  width: 100px;
  height: 100px;
  border-radius: 10px 10px 10px 10px;
  position: absolute;
  top: -25px;
  left: 10px;
  /*border: #f7f7f7 1px solid ;*/
}

.headMsgbox {
  position: relative;
  left: 5%;
  background: white;
  width: 90%;
  min-height:50px;
  top: -40px;
  border: white 1px solid;
  border-radius: 10px 10px 10px 10px;
}

.localtion_msg {
  font-size: 14px;
  position: relative;
  white-space: nowrap;
  width: 60%;
  overflow:hidden;
  text-overflow:    ellipsis;
  /*border: black 1px solid;*/
}

.compay_msg {
  position: relative;
  font-size: 16px;

  /*white-space: nowrap;*/
  width: 60%;
  display: -webkit-box;
  overflow:hidden;
  text-overflow:    ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2; /*只显示两行*/
  -webkit-box-orient: vertical;
  /*border: black 1px solid;*/
}

.com_locbox {
  position: relative;
  left: 119px;
}

.buttom_back_gournd_box {
  position: relative;
  left: 5%;
  background: white;
  width: 90%;
  top: -50px;
  height: 100px;
  z-index: -1;
  border: white 1px solid;
  border-radius: 10px 10px 10px 10px;
}


.line {
  content: '';
  pointer-events: none;
  width: 100%;
  position: relative;
  left: 0;
  bottom: -10px;
  border: 0 solid #dcdcdc;
  border-top-width: 1px;
  transform: scaleY(0.5);
}
.linepay{
  content: '';
  pointer-events: none;
  width: 100%;
  position: relative;
  left: 0;
  top: 10px;
  border: 0 solid #dcdcdc;
  border-top-width: 1px;
  transform: scaleY(0.5);
}

.van-icon{
  vertical-align: -10%
}
.icon{
  vertical-align: -13%;
  width:16px;
  height:16px;
}





.pay_success_box{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position: absolute;
  left: 50%;
  top: 70px;
  transform: translate(-50%,0%);
}
.flow_box_margin{
  margin-left: 10px;
  margin-right: 10px;
}
.one_flow{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align: center;
}

.flow_ch_box_size{
  font-size: 10px;
  margin-top: -1px;
  width: 72px;

}

.checked_icon{
  font-size: 60px;
  color:  rgb(25,137,250)
}

.paysuccess{
  font-size: 16px;
  margin-top: -1px;

}
.paymoney{
  margin-top:0px;
}
.msg_icon{
  color: #884191;
}
.flow{
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content:center;
  position: absolute;
  top: 245px;
  left: 50%;
  transform: translate(-50%,0%);
}

.flow_ch{
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content:center;
  position: absolute;
  top: 317px;
  left: 50%;
  transform: translate(-50%,0%);
  font-size: 7px;
}
.msg_box{
  width: 300px;
  position: absolute;
  top: 340px;
  left: 50%;
  transform: translate(-50%,0);
}
.back_box_long{
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 600px;
  transform: translate(-50%,0);
  color:  rgb(136,65,145);
}
.remark{
  font-size: 20px;
  color: #646566;
  display: flex;
  flex-direction:  column ;
  position: absolute;
  left: 45px;
  top: 350px;
}
.iconmsg{
  color: #646566;
  width:18px;
  height:18px;
  vertical-align: -8%;

}
.hr{
  position: relative;
  top: 300px;
  z-index: 3;
  width: 74.4%;
}
.search_box{
  position: relative;
  top: -15px;
}
.search_line{
  content: '';
  pointer-events: none;
  width: 100%;
  position: relative;
  left: 0;
  bottom: 7px;
  border: 0 solid #dcdcdc;
  border-top-width: 1px;
  transform: scaleY(0.5);
}


</style>

